<template>
  <div id="map">
    <div class="change-map" v-if="show">
      <div class="change-title">
        地区：{{ content.name }}
      </div>
      <h3 style="color: #266afa">数字产业化</h3>
      <div class="change-item" v-for="(item,index) in content.child">{{ item.title }}：<strong
          :style="{color:index>=2?'blue':'#333333'}">{{ item.value }}{{ item.unit }}</strong></div>

      <h3 style="color: #266afa">产业数字化</h3>
      <div class="change-item" style="display: flex;justify-content: space-between"
           v-for="(item,index) in content.child2">
        <div>{{ item.title }}：<strong>{{ item.value }}</strong></div>
        <div>增速：{{ item.up }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>

import AMapLoader from "@amap/amap-jsapi-loader";
import wuzhouJson from "@/assets/wuzhou.json";
import digitalCity from "@/assets/data/digitalEconomy/digitalCity.json"
import {onMounted, onUnmounted, reactive, ref, watch} from "vue";
import utils from "@/utils/index.js";

const  props = defineProps({
  checkedValue:{
    type:Number,
    default:0
  }
})


const wzData = [
  {
    "name": "万秀区",
    "adcode": 450403,
    "center": [111.395055, 23.489288],
    "child": [
      {
        "title": "规上工业产值",
        "value": "46614.77",
        "unit": "万元"
      }, {
        "title": "规上工业销售产值",
        "value": "141614.77",
        "unit": "万元"
      }, {
        "title": "规上企业数量",
        "value": "68",
        "unit": "家"
      }, {
        "title": "22年产值过亿企业",
        "value": "8",
        "unit": "家"
      }
    ],
    "child2": [
      {
        "title": "项目数",
        "value": "0",
        "up": "0"
      }, {
        "title": "投资规模",
        "value": "0",
        "up": "0"
      }
    ],

  },
  {
    "name": "长洲区",
    "adcode": 450405,
    "center": [111.208681, 23.586792],
    "child": [
      {
        "title": "规上工业产值",
        "value": "6614.77",
        "unit": "万元"
      }, {
        "title": "规上工业销售产值",
        "value": "46614.77",
        "unit": "万元"
      }, {
        "title": "规上企业数量",
        "value": "8",
        "unit": "家"
      }, {
        "title": "22年产值过亿企业",
        "value": "2",
        "unit": "家"
      }
    ],
    "child2": [
      {
        "title": "项目数",
        "value": "0",
        "up": "0"
      }, {
        "title": "投资规模",
        "value": "0",
        "up": "0"
      }
    ],
  },
  {
    "name": "龙圩区",
    "adcode": 450406,
    "center": [111.351253, 23.218567],
    "child": [
      {
        "title": "规上工业产值",
        "value": "4614.77",
        "unit": "万元"
      }, {
        "title": "规上工业销售产值",
        "value": "14614.77",
        "unit": "万元"
      }, {
        "title": "规上企业数量",
        "value": "6",
        "unit": "家"
      }, {
        "title": "22年产值过亿企业",
        "value": "2",
        "unit": "家"
      }
    ],
    "child2": [
      {
        "title": "项目数",
        "value": "0",
        "up": "0"
      }, {
        "title": "投资规模",
        "value": "0",
        "up": "0"
      }
    ],
  },
  {
    "name": "苍梧县",
    "adcode": 450421,
    "center": [111.544008, 23.845097],
    "child": [
      {
        "title": "规上工业产值",
        "value": "6617.21",
        "unit": "万元"
      }, {
        "title": "规上工业销售产值",
        "value": "76614.77",
        "unit": "万元"
      }, {
        "title": "规上企业数量",
        "value": "5",
        "unit": "家"
      }, {
        "title": "22年产值过亿企业",
        "value": "2",
        "unit": "家"
      }
    ],
    "child2": [
      {
        "title": "项目数",
        "value": "0",
        "up": "0"
      }, {
        "title": "投资规模",
        "value": "0",
        "up": "0"
      }
    ],
  },
  {
    "name": "藤县",
    "adcode": 450422,
    "center": [110.931826, 23.373963],
    "child": [
      {
        "title": "规上工业产值",
        "value": "9831.45",
        "unit": "万元"
      }, {
        "title": "规上工业销售产值",
        "value": "1477.33",
        "unit": "万元"
      }, {
        "title": "规上企业数量",
        "value": "19",
        "unit": "家"
      }, {
        "title": "22年产值过亿企业",
        "value": "12",
        "unit": "家"
      }
    ],
    "child2": [
      {
        "title": "项目数",
        "value": "0",
        "up": "0"
      }, {
        "title": "投资规模",
        "value": "0",
        "up": "0"
      }
    ],
  },
  {
    "name": "蒙山县",
    "adcode": 450423,
    "center": [110.5226, 24.199829],
    "child": [
      {
        "title": "规上工业产值",
        "value": "78923.21",
        "unit": "万元"
      }, {
        "title": "规上工业销售产值",
        "value": "9034.12",
        "unit": "万元"
      }, {
        "title": "规上企业数量",
        "value": "13",
        "unit": "家"
      }, {
        "title": "22年产值过亿企业",
        "value": "8",
        "unit": "家"
      }
    ],
    "child2": [
      {
        "title": "项目数",
        "value": "0",
        "up": "0"
      }, {
        "title": "投资规模",
        "value": "0",
        "up": "0"
      }
    ],
  },
  {
    "name": "岑溪市",
    "adcode": 450481,
    "center": [110.998114, 22.918406],
    "child": [
      {
        "title": "规上工业产值",
        "value": "7890.22",
        "unit": "万元"
      }, {
        "title": "规上工业销售产值",
        "value": "18903.89",
        "unit": "万元"
      }, {
        "title": "规上企业数量",
        "value": "43",
        "unit": "家"
      }, {
        "title": "22年产值过亿企业",
        "value": "12",
        "unit": "家"
      }
    ],
    "child2": [
      {
        "title": "项目数",
        "value": "0",
        "up": "0"
      }, {
        "title": "投资规模",
        "value": "0",
        "up": "0"
      }
    ],
  }
]


let amap = reactive();
const content = ref()
const show = ref(false)
const textStyle = {
  fontSize: 12,
  fontWeight: 'normal',
  fillColor: '#fff',
  padding: '2, 5',
  backgroundColor: 'rgb(246,137,38)',
  borderColor: '#fff',
  borderWidth: 1,
};

onMounted(() => {
  mapInit()
});


onUnmounted(() => {
  amap?.destroy();
});


const mapInit = () => {
  window._AMapSecurityConfig = {
    securityJsCode: "fb41d43f5d04ec8a71ea44877b957076",
  };
  AMapLoader.load({
    key: "8384a3faf03df0ad71e293389aa875a0",
    version: "2.0",
    plugins: [
      "AMap.Scale",
      "AMap.DistrictSearch",
      "AMap.Polygon",
      "AMap.GeoJSON",
      "AMap.GeometryUtil",
      "AMap.LabelsLayer",
      "AMap.LabelMarker",
      "AMap.MapType",
      "AMap.InfoWindow",
      "AMap.Marker",
      "AMap.MassMarks",
      "AMap.Pixel",
      "AMap.Size"
    ],
  })
      .then((AMap) => {
        amap = new AMap.Map("map", {
          zoom: 9.2,
          center: [111.279022, 23.476733],
          viewMode: "2D",
          mapStyle: 'amap://styles/fresh'
        });
      }).then(() => {
    setMapType()
    setGeoJson()
    setLabelsLayer()
    setMassMarks()
  }).catch((e) => {
    console.log(e);
  });
}

const setMassMarks = () => {
  if (mass) {
    mass.clear()
  }
  setTimeout(() => {
    getMassMarks()
  }, 0)
}

const setMapType = () => {
  amap.addControl(new AMap.MapType({
    defaultType: 0,
    showRoad: true,
    showTraffic: false
  }));
}

watch(() =>  props.checkedValue, (newVal, oldValue) => {
  setMassMarks()
})

let mass = reactive()
const getMassMarks = (n) => {
  mass = new AMap.MassMarks(null, {
    opacity: 0.8,
    zIndex: 111,
    cursor: 'pointer',
    style: {
      url: utils.getAssetsFile('point.png'),
      anchor: new AMap.Pixel(6, 6),
      size: new AMap.Size(35, 35),
      zIndex: 3,
    }
  });

  const marker = new AMap.Marker({content: ' ', map: amap});
  mass.on('mouseover', function (e) {
    marker.setPosition(e.data.lnglat);
    marker.setLabel({content: e.data.name})
  });
  mass.setData(digitalCity[props.checkedValue]);
  mass.setMap(amap)
}

const setLabelsLayer = () => {
  const markers = [];
  const layer = new AMap.LabelsLayer({
    zooms: [3, 20],
    zIndex: 1000,
    collision: false,
    allowCollision: false,
  });
  layer.add(markers);
  amap.add(layer);

  wzData.forEach(item => {
    const marker = new AMap.LabelMarker({
      name: item.name,
      position: item.center,
      text: {
        content: item.name,
        direction: 'center',
        style: textStyle,
      }
    });
    marker.content = item.content
    marker.on('click', markerClick);
    markers.push(marker);
  })
  layer.add(markers);
  amap.add(layer);
}

//点击 marker，显示 信息
const markerClick = (e) => {
}

const setGeoJson = () => {
  const geojson = new AMap.GeoJSON({
    geoJSON: wuzhouJson,
    getPolygon: function (wzArea, lnglats) {
      const area = AMap.GeometryUtil.ringArea(lnglats[0][0])
      const polygon = new AMap.Polygon({
        path: lnglats[0],
        fillOpacity: Math.sqrt(area / 8000000000),// 面积越大透明度越高
        strokeColor: 'white',
        fillColor: '#2758bb'
      });

      polygon.on('mouseover', (e) => {
        content.value = wzData.find(item => {
          return item.adcode === wzArea.properties.adcode
        })
        show.value = true
        polygon.setOptions({
          fillOpacity: 0.7,
          fillColor: '#f6bd16'
        })
      })
      polygon.on('mouseout', () => {
        show.value = false
        content.value = ''
        polygon.setOptions({
          fillOpacity: Math.sqrt(area / 8000000000),// 面积越大透明度越高
          fillColor: '#2758bb'
        })
      })
      return polygon;
    }
  });
  amap.add(geojson);
}
</script>


<style scoped lang="scss">
#map {
  width: 100%;
  height: 100%;
  margin-bottom: 15px;
  background-color: #ffffff;
  position: relative;

  .top-map {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 400px;
    z-index: 1;
    padding: 0 20px 10px 20px;
    box-sizing: border-box;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, .8);
  }

  .change-map {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 99;
    font-size: 12px;
    width: 380px;
    min-height: 200px;
    background-color: rgba(255, 255, 255, .8);
    padding: 20px;
    box-sizing: border-box;
    text-align: left;

    .change-title {
      padding: 5px 10px;
      font-size: 16px;
      font-weight: bold;
      background-color: #ffffff;
      margin-bottom: 10px;
    }

    .change-item {
      padding: 5px 10px;
      font-size: 14px;
    }
  }
}
</style>
